<script lang="ts">
/**
 * @author leo
 * @description #19518 【组件】视频table列表
 * @param {string[]} data - 表格数据 DataType类型
 * @slot firstColumn 首列
 * @slot handle 尾列
 * @slot handle 尾列
 * @event on-select 选中
 * @event on-select-all 全选
 */

import {
  Vue,
  Component,
  Prop,
  Emit,
  Watch,
  Mixins
} from "vue-property-decorator";
import TableMix from "@/views/mixins/TableMix";
import { watch } from "fs";

export interface DataType {
  id: number;
  cover: number; // 视频图片
  size: string; // 大小
  create_time: string; // 上传时间
  play_num: string; // 播放次数
  status: string; // 状态
  tags: string[]; // 标签
}

@Component
export default class VideoTable extends Mixins(TableMix) {
  @Prop() public data!: DataType[];
  @Prop() public loading!: boolean;

  public onClickVideo(item: any) {
    this.$emit("on-click-video", item);
  }

  public selectionChange(item: any) {
    this.$emit("on-select", item);
  }

  public selectAllChange(item: any) {
    this.$emit("on-select-all", item);
  }
}
</script>

<template>
  <el-table
    class="video-table"
    v-bind="$attrs"
    :ref="refName"
    v-loading="loading"
    :size="componentsSize"
    :data="data"
    :empty-text="emptyText"
    @select="selectionChange"
    @select-all="selectAllChange"
    style="width: 100%"
  >
    <slot name="firstColumn"></slot>
    <el-table-column label="视频" width="120">
      <template slot-scope="{row}">
        <img
          :src="row.cover"
          style="display:block;width:40px;height:40px;cursor:pointer;"
          @click="onClickVideo(row)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="文件名称" min-width="120">
      <template slot-scope="{row}">{{row.name}}</template>
    </el-table-column>
    <el-table-column prop="size" label="大小" min-width="80">
      <template slot-scope="{row}">{{(row.size/1024/1024).toFixed(2)}}M</template>
    </el-table-column>
    <el-table-column prop="time" label="上传时间" min-width="80">
      <template slot-scope="{row}">{{$ph(row.create_time)}}</template>
    </el-table-column>
    <el-table-column prop="play_num" label="播放次数" min-width="80">
      <template slot-scope="{row}">{{$ph(row.play_num)}}</template>
    </el-table-column>
    <!-- <el-table-column
      prop="status"
      label="状态"
      min-width="80">
      <template slot-scope="{row}">
        <el-tag :type="row.status === 'success' ? 'success' : '' ">{{$ph(row.status === 'success' ? '成功' : '失败')}}</el-tag>
      </template>
    </el-table-column>-->
    <!-- <el-table-column
      prop="tags"
      label="标签"
      min-width="120">
      <template slot-scope="{row}">
        <el-tag size="mini" v-for="(item,index) in row.tags" :key="index">{{item}}</el-tag>
      </template>
    </el-table-column>-->
    <slot name="handle"></slot>
  </el-table>
</template>

<style lang="less">
</style>
